<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Node Styles | Overriding Group Styles</title>

    <style>
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        background: #3d3d3d;
      }

      .mycontainer {
        position: relative;
        width: 100%;
        height: 100%;
      }
      #mynetwork {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>
  </head>

  <body>
    <div class=".mycontainer">
      <div id="mynetwork" />
    </div>

    <script type="text/javascript">
      var color = "gray";
      var len = undefined;

      var nodes = [
        { id: 1, label: "Node: 1\nGroup: 1", group: 1 },
        { id: 2, label: "Node: 2\nGroup: 1", group: 1 },
        { id: 3, label: "Node: 3\nGroup: 1", group: 1 },
        { id: 4, label: "Node: 4\nGroup: 1", group: 1 },
        { id: 5, label: "Node: 5\nGroup: 2", group: 2 },
        {
          id: 6,
          label: "Node: 6\nGroup: 2\nCustom background",
          group: 2,
          color: { background: "#003d3d" },
        },
        {
          id: 7,
          label: "Node: 7\nGroup: 2\nCustom border",
          group: 2,
          color: { border: "#00d3d3" },
        },
        { id: 8, label: "Node: 8\nGroup: 2", group: 2 },
        { id: 9, label: "Node: 9\nGroup: 3", group: 3 },
        { id: 10, label: "Node: 10\nGroup: 3", group: 3 },
        { id: 11, label: "Node: 11\nGroup: 3", group: 3 },
        { id: 12, label: "Node: 12\nGroup: 3", group: 3 },
      ].map((node, index, arr) => {
        const angle = 2 * Math.PI * (index / arr.length + 0.75);
        node.x = 400 * Math.cos(angle);
        node.y = 400 * Math.sin(angle);
        if (index % 2 === 0) {
          node.value = index + 1;
        }
        return node;
      });
      var edges = [
        { from: 1, to: 2 },
        { from: 2, to: 3 },
        { from: 3, to: 4 },
        { from: 4, to: 5 },
        { from: 5, to: 6 },
        { from: 6, to: 7 },
        { from: 7, to: 8 },
        { from: 8, to: 9 },
        { from: 9, to: 10 },
        { from: 10, to: 11 },
        { from: 11, to: 12 },
        { from: 12, to: 1 },
      ];

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };
      var options = {
        physics: false,
        nodes: {
          shape: "dot",
          size: 30,
          font: {
            size: 32,
            color: "#ffffff",
          },
          borderWidth: 2,
        },
        edges: {
          width: 2,
          arrows: "to",
        },
      };
      network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
